<template>
  <div>
    <div id="test" class="test"></div>
  </div>
</template>
<script>
import dataApi from "@/api/data";
export default {
  data() {
    return {
      items: [],
      chart: null,
    };
  },
  mounted() {
    this.prepareData();
  },
  methods: {
    prepareData() {
      this.items = dataApi.getData().then((response) => {
        this.items = response.data.items;
        this.initChart();
      });
    },
    initChart() {
      this.chart = this.$echarts.init(document.getElementById("test"));
      let option = this.setChart();
      this.chart.setOption(option);
    },
    setChart() {
      let option = {
        title: {
          text: "北京林业信息显示",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: [
            "森林覆盖率",
            "林地面积",
            "活立木总蓄积",
            "森林面积",
            "森林蓄积",
            "人工林面积",
            "人工林蓄积",
            "天然林面积",
            "天然林蓄积",
            "乔木林单位面积蓄积量",
          ],
          bottom: 0,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          name: "年份",
          type: "category",
          data: ["2013", "2014", "2015", "2016", "2017", "2018"],
        },
        yAxis: {
          name: "面积",
          type: "value",
        },
        series: [
          {
            name: "森林覆盖率",
            type: "bar",
            data: this.getData("森林覆盖率"),
          },
          {
            name: "林地面积",
            type: "bar",
            stack: "显示数据",
            data: this.getData("林地面积"),
          },
          {
            name: "活立木总蓄积",
            type: "bar",
            stack: "显示数据",
            data: this.getData("活立木总蓄积"),
          },
          {
            name: "森林面积",
            type: "bar",
            stack: "显示数据",
            data: this.getData("森林面积"),
          },
          {
            name: "森林蓄积",
            type: "bar",
            data: this.getData("森林蓄积"),
          },
          {
            name: "人工林面积",
            type: "bar",
            barWidth: 5,
            stack: "合并数据",
            data: this.getData("人工林面积"),
          },
          {
            name: "人工林蓄积",
            type: "bar",
            stack: "合并数据",
            data: this.getData("人工林蓄积"),
          },
          {
            name: "天然林面积",
            type: "bar",
            stack: "合并数据",
            data: this.getData("天然林面积"),
          },
          {
            name: "天然林蓄积",
            type: "bar",
            stack: "合并数据",
            data: this.getData("天然林蓄积"),
          },
          {
            name: "乔木林单位面积蓄积量",
            type: "bar",
            stack: "合并数据",
            data: this.getData("乔木林单位面积蓄积量"),
          },
        ],
      };
      return option;
    },
    getData(item) {
      let res = [];
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i]["city"] === "北京")
          res.push(Number(this.items[i][item]));
      }
      return res;
    },
  },
};
</script>
<style scoped>
.test {
  width: 100%;
  height: 800px;
  float: left;
}
</style>
